import React, { Component } from "react";
import { Button, Toast, NavBar, Icon } from "antd-mobile";
import "./Detail.less";
import { reqGoodsInfo, reqShopAdd } from "../../http/api";
export default class Detail extends Component {
  constructor() {
    super();
    this.state = {
      info: {},
    };
  }
  componentDidMount() {
    let {
      match: {
        params: { id, type },
      },
    } = this.props;
    reqGoodsInfo({ id, type }).then((res) => {
      if (res.data.code === 200) {
        this.setState({
          ...this.state,
          info: res.data.list[0],
        });
      }
    });
  }
  addShop({ uid, type, goodsid}) {
    reqShopAdd({ type, uid, goodsid, num:1 }).then((res) => {
      if (res.data.code === 200) {
        Toast.info(res.data.msg, 1);
      }
    });
  }
  
  render() {
    

    let { info,uid } = this.state;
    let {
      match: {
        params: { id, type },
      },
    } = this.props;
    return (
      <div className="details">
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => {
            this.props.history.go(-1);
          }}
        >
          詳情页
        </NavBar>
        {info ? (
          <div>
            <img src={info.img} alt="" />
            <div className="price">
              <span>￥{info.price}</span>
              <s>￥{info.market_price}</s>
            </div>
            <div>{info.goodsname}</div>
            <Button
              type="primary"
              style={{ background: "#FF6040" }}
              onClick={() => {
                console.log(uid, type, id);
                this.addShop({ uid:JSON.parse(sessionStorage.getItem("info")).uid, type, goodsid: id });
              }}
            >
              加入购物车
            </Button>
          </div>
        ) : null}
      </div>
    );
  }
}
